import { useIntl } from '@umijs/max';
import { ConfigProvider, Table, Tooltip } from 'antd';
import classNames from 'classnames';
import React from 'react';
import { fitChartSize } from '../utils/tools';
import Styles from './StationOverview.less';
/**
 * 定义事件对象的结构
 * @param eventKey {number} - 事件的唯一标识符。
 * @param eventTime {number} - 事件的时间戳。
 * @param eventStatus {string} - 事件的当前状态。
 * @param eventPloy {string} - 事件中执行的策略描述。
 */
export interface IEvent {
  stationName?: string;
  stationUser?: string;
  stationCapacity?: string;
  stationState?: string;
}

export interface StationOverviewProps {
  eventType?: string;
  StationOverviewData?: IEvent[];
}

const StationOverview: React.FC<StationOverviewProps> = ({ StationOverviewData }) => {
  const intl = useIntl();
  // 动态生成列
  const getColumns = () => {
    let columns = [
      {
        title: intl.formatMessage({ id: 'bigdata.S/N' }),
        dataIndex: 'stationRank',
        key: 'stationRank',
      },
      {
        title: intl.formatMessage({ id: 'bigdata.plantName' }),
        dataIndex: 'stationName',
        key: 'stationName',
        render: (text: string) => {
          return (
            <Tooltip
              title={text}
              getPopupContainer={(triggerNode: any) => triggerNode}
              overlayInnerStyle={{
                backgroundColor: 'rgba(3, 25, 54, 0.9)',
                border: '1px solid #4c8fce',
                color: '#C4D4F1',
                fontSize: fitChartSize(12),
              }}
            >
              <div className={classNames(Styles.truncate_text)}>{text}</div>
            </Tooltip>
          );
        },
      },
      {
        title: intl.formatMessage({ id: 'bigdata.ratedCapacity' }),
        dataIndex: 'stationCapacity',
        key: 'stationCapacity',
      },
      {
        title: intl.formatMessage({ id: 'bigdata.status' }),
        dataIndex: 'stationState',
        key: 'stationState',
      },
    ];

    return columns;
  };

  const nodataNode = () => (
    <div>
      <div style={{ paddingTop: '25px' }}>
        <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(0 1)" fill="none" fillRule="evenodd">
            <ellipse fill="#f6f6f6" cx="32" cy="33" rx="32" ry="7"></ellipse>
            <g fillRule="nonzero" stroke="#dedede">
              <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
              <path
                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                fill="#fbfbfb"
              ></path>
            </g>
          </g>
        </svg>
      </div>
      <div style={{ color: '#fff' }}>No data</div>
    </div>
  );

  // 定义 rowClassName 函数
  const rowClassName = (record: IEvent, index: number) => {
    return classNames(Styles.bigDataTableRow, {
      [Styles.rank_one]: index === 0,
      [Styles.rank_two]: index === 1,
      [Styles.rank_three]: index === 2,
    });
  };

  return (
    <div className={Styles.stationOverviewTable}>
      <ConfigProvider
        theme={{
          components: {
            Table: {
              cellPaddingBlock: fitChartSize(8),
              cellPaddingInline: fitChartSize(12),
              algorithm: true,
              headerBg: '#0F2035',
              headerColor: '#5381CC',
              headerSplitColor: 'transparent',
              rowHoverBg: 'transparent',
              rowSelectedBg: 'transparent',
              rowSelectedHoverBg: 'transparent',
            },
          },
        }}
      >
        <Table
          dataSource={StationOverviewData}
          columns={getColumns()}
          rowClassName={rowClassName}
          locale={{
            emptyText: nodataNode,
          }}
          pagination={false}
        />
      </ConfigProvider>
    </div>
  );
};

export default StationOverview;
